<template>
    <div>
        <Header>
            <div slot="middle">
                <div>我的</div>
            </div>
        </Header>
        <div class="goLogin">
            <div class="photo">
                <img src="../../assets/img/profile/avatar.svg" alt="">
            </div>
            <div v-if="user.name" class="info">
                 <p @click="logoutDia">退出登录</p>
                <p>{{`欢迎${user.name}`}}</p>
            </div>
            <div v-else>
                <p @click="goLogin">登录/注册</p>
                <p>暂无绑定手机号</p>
            </div>
            <div class="iconfont icon-fanhuijiantou"></div>
        </div>
    </div>
</template>

<script>
import Header from 'components/common/HeaderGuide/Header'
import { Dialog } from 'vant';
import {mapState} from 'vuex'
export default {
    components:{
        Header
    },
    computed:{
        ...mapState({
            user:state=>state.user.user
        })
    },
    
    methods:{
        goLogin(){
            console.log(1);
            this.$router.push('/login')
        },
        logoutDia(){
            Dialog.confirm({
            message: '确定退出么',
            })
            .then(() => {
                this.$store.dispatch('logout')
            })
            .catch(() => {
                // on cancel
            });
        }
    }
};
</script>

<style lang="less" scoped>
.goLogin{
    display: flex;
    height: 100px;
    background-color: pink;
    margin-top: 2px;
    justify-content: center;
    align-items: center;
    text-align: center;
    .photo{
        flex: 1;
    }
    .info{
        flex: 2;
        padding-left: 20px;
    }
    .iconfont{
        flex: 1;
    }
    img{
       width: 80px;
       height: 80px;
    }
}

</style>

